<template>
    <el-container>
      <el-main>
        <el-form :model="form.model" ref="formRef" label-width="100px">
          
          <el-form-item label="团长分佣">
              <el-input v-model="form.model.rate" placeholder="请输入分佣比例，例如：30"></el-input>
          </el-form-item>
          
          <div style="margin-left: 40px;">团员：70%</div>
        </el-form>
      </el-main>
      <el-footer class="sa-footer--submit">
        <el-button
            
            type="primary"
            @click="confirm"
        >添加
        </el-button>
        <el-button
           
            
            type="primary"
            @click="confirm"
        >更新
        </el-button
        >
      </el-footer>
    </el-container>
  </template>
  
  <script setup>
  import {onMounted, reactive, unref, ref} from 'vue';
  import {cloneDeep} from "lodash";

  
  const emit = defineEmits(['modalCallBack']);
  
  const props = defineProps({
    modal: {
      type: Object,
    },
  });
  
  const formRef = ref(null);
  
  const form = reactive({
    model: {
      rate: '',
     
    }
  });
  
  onMounted(() => {
    if (props.modal.params.id) {
      init(props.modal.params.id);
    }
  })
  
  const init = async (id) => {
    const {error, data} = await api.settings.detail(id);
    if (error === 0) {
      form.model.role = data.role
      form.model.device_radio = data.device_radio
      form.model.ad_radio = data.ad_radio
      form.model.shop_radio = data.shop_radio
    }
  }
  
  const confirm = () => {
    unref(formRef).validate(async (valid) => {
      if (!valid) return;
      let submitForm = cloneDeep(form.model);
      const {error} =
          props.modal.params.type === 'add' ? await api.settings.add(submitForm) : await api.settings.edit(props.modal.params.id, submitForm);
      if (error === 0) {
        emit('modalCallBack', {event: 'confirm'});
      }
    });
  }
  </script>